<!-- 员工管理 -->

<template>
    <div style="text-align: center;margin: auto;">

        <div style="text-align: right;">
            <el-button type="primary" @click="changeShowAddUserInformation">新增员工</el-button>
        </div>
        <el-divider>
            <h2>员工管理</h2>
        </el-divider>
        <el-table :data="employeesAll" style="margin: auto;">
            <el-table-column prop="userId" label="ID" width="50px"></el-table-column>
            <el-table-column label="身份">
                <template v-slot:default="slotProps">
                    <template v-if="slotProps.row.userType == 'manager'">
                        <el-tag type="danger">经理</el-tag>
                    </template>
                    <template v-else-if="slotProps.row.userType == 'department_manager'">
                        <el-tag type="warning">部门主管</el-tag>
                    </template>
                    <template v-else>
                        <el-tag type="success">员工</el-tag>
                    </template>
                </template>
            </el-table-column>
            <el-table-column prop="userName" label="工号"></el-table-column>
            <el-table-column prop="userAge" label="年龄" sortable></el-table-column>
            <el-table-column prop="userDepartmentName" label="部门" sortable :filters="departmentsForFilter"
                :filter-method="departmentFilterMethod"></el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <!-- <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button> -->
                    <el-button size="mini" type="primary" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                </template>
            </el-table-column>
            <el-table-column label="删除">
                <template slot-scope="scope">
                    <!-- <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button> -->
                    <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <update-user-information v-bind:showAble="isShowUpdateUserInformation" v-bind:changeUserId="changeUserId"
            v-on:closeUpdateUserInformation="changeShowUpdateUserInformation" v-bind:addOrChange="addOrChange"></update-user-information>

        <el-dialog :visible="isShowDeleteConfirmDialog" title="删除确认" :before-close="function (){isShowDeleteConfirmDialog=false}">
            <el-button type="primary" @click="deleteUser">确认</el-button>
            <el-button @click="isShowDeleteConfirmDialog=false">取消</el-button>
        </el-dialog>

    </div>
</template>

<script>
    import axios from "axios";
    import qs from "qs"
    import updateUserInformation from "../components/updateUserInformation.vue";

    export default {
        name: "employeeManage",
        data() {
            return {
                employeesAll: [{
                    userId: "1",
                    userName: "kev",
                    userType: "employee",
                    userAge: "22",
                    userPhoneNumber: "111111111",
                    userDepartmentId: "1",
                    userDepartmentName: "good to see"
                }, ],
                isShowUpdateUserInformation: false, // 状态：是否展示更新用户信息窗口
                changeUserId: null, // 需要被更改的用户ID
                addOrChange: "change",
                isShowDeleteConfirmDialog: false,
                departmentsForFilter: [{
                    text: "text",
                    value: "value"
                }],
                deleteUserId: null
            }
        },
        methods: {
            handleEdit(index, row) {
                // console.log(index, row);
                console.log(row.userId);
                // this.$emit("changeShowUpdateUserInformation", row.userId);
                this.changeShowUpdateUserInformation(row.userId);
            },
            handleDelete(index, row) {
                console.log(row.userId);
                this.isShowDeleteConfirmDialog = true;
                this.deleteUserId = row.userId;
            },
            changeShowUpdateUserInformation: function(changeUserId) {
                console.log("get changeShowUpdateUserInformation")
                console.log("change user id: " + changeUserId);
                this.changeUserId = changeUserId;
                this.addOrChange = "change"
                this.isShowUpdateUserInformation = !this.isShowUpdateUserInformation;
                this.getEmployeesAll();
            },

            /**
             * @description  更改Dialog的状态
             * @param {Object} changeUserId
             */
            changeShowAddUserInformation: function(changeUserId) {
                console.log("get changeShowUpdateUserInformation")
                console.log("change user id: " + changeUserId);
                // this.changeUserId = changeUserId;
                this.addOrChange = "add";
                // console.log("flush**************************");
                if (this.isShowUpdateUserInformation == true) {
                    // console.log("flush**************************");
                    this.getEmployeesAll();
                }
                this.isShowUpdateUserInformation = !this.isShowUpdateUserInformation;
                // this.getEmployeesAll();
            },

            /**
             * @description 从服务器获取 employee 数据
             * @function getEmployeesAll
             */
            getEmployeesAll: function() {
                this.employeesAll.length = 0;
                var _this = this;
                axios.get("http://127.0.0.1:8000/api/user/all/")
                    .then(function(response) {
                        console.log("getEmployeesAll");
                        console.log(response);

                        for (var i = 0; i < response.data.data.user_all.length; ++i) {
                            _this.employeesAll.push({
                                userId: response.data.data.user_all[i].user_id,
                                userName: response.data.data.user_all[i].user_name,
                                userType: response.data.data.user_all[i].user_type,
                                userAge: response.data.data.user_all[i].user_age,
                                userPhoneNumber: response.data.data.user_all[i].user_phone_number,
                                userDepartmentId: response.data.data.user_all[i].user_department_id,
                                userDepartmentName: _this.getDepartmentNameById(response.data.data.user_all[
                                    i].user_department_id)
                            })
                        }
                    })
                    .catch(function(error) {
                        console.log(error);
                    })
            },

            /**
             * @description 这个函数用来进行班次的过滤
             * @param {Object} value 
             * @param {Object} row
             * @param {Object} column
             */
            departmentFilterMethod: function(value, row, column) {
                return value === row.userDepartmentId;
            },

            /**
             * @description  用来获取可以区分班次划分的函数
             */
            getDepartmentsForFilter: function() {
                this.departmentsForFilter.length = 0;
                var _this = this;
                axios.get("http://127.0.0.1:8000/api/department/")
                    .then(function(response) {
                        console.log("get department")
                        console.log(response.data.data)
                        for (var i = 0; i < response.data.data.length; i++) {
                            _this.departmentsForFilter.push({
                                text: response.data.data[i].department_name,
                                value: response.data.data[i].department_id
                            })
                        }
                        _this.departments = response.data.data;
                        console.log("this is get departments")
                        console.log(_this);

                        _this.getEmployeesAll();
                    })
                    .catch(function(error) {
                        console.log(error);
                    })
            },

            /**
             * @description 根据部门ID获取部门的名字
             * @param {Object} departmentId
             */
            getDepartmentNameById: function(departmentId) {
                for (var i = 0; i < this.departmentsForFilter.length; ++i) {
                    if (this.departmentsForFilter[i].value === departmentId) {
                        return this.departmentsForFilter[i].text;
                    }
                }
                return null;
            },

            /**
             * @description 删除用户操作
             */
            deleteUser: function() {
                var _this = this;
                axios.post("http://127.0.0.1:8000/api/user/", JSON.stringify({
                        user_id: _this.deleteUserId,
                        action: "delete"
                    }))
                    .then(function(response) {
                        console.log("deleteUser success");
                        if (response.data.status == 0) {
                            _this.$message({
                                type: "success",
                                message: "恭喜，删除成功！"
                            })
                        } else {
                            _this.$message({
                                type: "error",
                                message: "抱歉，删除出现错误！"
                            })
                        }
                        _this.isShowDeleteConfirmDialog = false;
                        _this.getEmployeesAll();
                    })
                    .catch(function(error) {
                        console.log(error);
                        _this.$message({
                            type: "error",
                            message: "抱歉，删除出现错误！"
                        })
                    })
            }
        },
        mounted: function() {
            this.getDepartmentsForFilter();
        },
        components: {
            updateUserInformation
        }
    }
</script>

<style>

</style>
